<template>
  <div id="orgMain">
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"  :mask-closable="false" :footer-hide=true width="700px" :closable="false">
      <Form ref= "organizationEdit" :model="rowData" label-position="right" :label-width="120" :rules="rules">
        <FormItem :label="$t('code')" prop="code"><Input v-model="rowData.code" :readonly="modal.readonly"  maxlength=50></Input></FormItem>
        <FormItem :label="$t('name')" prop="name"><Input v-model="rowData.name" :readonly="modal.readonly" maxlength=255></Input></FormItem>
        <FormItem :label="$t('short_name')"><Input v-model="rowData.shortName" :readonly="modal.readonly" maxlength=80></Input></FormItem>
        <FormItem :label="$t('parent')"><OrganizationTree v-model="rowData.parentId" width="200px" ref="edtParent"></OrganizationTree></FormItem>
        <FormItem :label="$t('cluster_intercom_account')"><Input :disabled="!canEditGroupTalkUser" v-model="rowData.groupTalkUser" width="200px" ref="edtParent" maxlength=50></Input></FormItem>
        <FormItem :label="$t('cluster_intercom_password')"><Input :disabled="!canEditGroupTalkUser" type="password" v-model="rowData.groupTalkPswd" width="200px" ref="edtParent" maxlength=50></Input></FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save" >{{$t('save')}}</Button>
            <Button @click="close">{{$t('cancel')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import OrganizationTree from '@/components/topnav/OrganizationTree';
import {addOrg, updateOrg} from "@/api/Organization";
import {apiResult, getLoginUser} from "@/libs/util";
export default {
  components: {OrganizationTree},
  computed:{
    rules(){
      return{
        code:[{required: true, message: this.$t('code_must_be_enter'), trigger: 'blur'}],
        name:[{required: true, message: this.$t('name_must_be_enter'), trigger: 'blur'}],
        shortName:[{required: true, message: this.$t('short_name_must_be_enter'), trigger: 'blur'}],
      }
    },
  },
  data(){
    return{
      modal:{
        show:false,
        loading:false,
        title:"",
        action:"VIEW",
        callback:null,
        readonly:false
      },
      rowData:{
        id: null,
        code: null,
        name: null,
        shortName: null,
        parentId: null,
        groupTalkUser: null,
        groupTalkPswd: null
      },

      canEditGroupTalkUser: false
    }
  },
  methods:{
    openDialog: function (action,row, callback) {
      console.log("openDialog: row=%o",row);
      this.modal.show=true;
      this.modal.readonly=false;
      this.modal.callback = callback;
      this.modal.show = true;
      this.modal.action = action;
      if (action=="ADD"){
        this.rowData.id=null;
        this.rowData.code=null;
        this.rowData.name=null;
        this.rowData.shortName=null;
        this.rowData.parentId=null;
        this.rowData.groupTalkUser=null;
        this.rowData.groupTalkPswd=null;
        this.modal.title=this.$t('add');
        this.$refs["organizationEdit"].resetFields();
        if (!!row){
            this.rowData.parentId = row.id;
        }
      }else if (action=="VIEW"){
        this.modal.title=this.$t('browse');
        this.$refs["organizationEdit"].resetFields();
        this.rowToData(row);
        this.modal.readonly=true;
      }else if (action=="EDIT"){
        this.modal.title=this.$t('edit');
        //this.rowData = row;
        this.rowToData(row);
      }

    },
    save(){
      let that = this;
      this.$refs["organizationEdit"].validate((valid) => {
        if (that.modal.action == "VIEW"){that.close();}
        if (valid) {
          /** 新增 */
          if (that.rowData.id == null){
            addOrg(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback(res.data.data);
                 that.close();
              })
            })
          }else{
            updateOrg(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback(res.data.data);
                that.close();
              })
            })
          }
        } else {
          that.$Message.error(this.$t('data_check_error'));
          return;
        }
      })
    },
    close(){
      this.modal.show=false;
      this.$refs["organizationEdit"].resetFields();
    },
    rowToData(row){
        this.rowData.id=row.id;
        this.rowData.code=row.code;
        this.rowData.name=row.name;
        this.rowData.shortName=row.shortName;
        this.rowData.parentId=row.parentId;
        this.rowData.groupTalkUser=row.groupTalkUser;
        this.rowData.groupTalkPswd=row.groupTalkPswd;
    }
  },
  mounted() {
    const userInfo = getLoginUser();
    console.log(">>>>> organizationEdit.mounted userInfo=%o",userInfo);
    if (!!userInfo)
      this.canEditGroupTalkUser = userInfo.permissionLevel === 9;
  }
}
</script>
<style lang="less">
  @import ".././template";
</style>
